<template>
  <div class="selectBox">
    <a-spin
      v-if="showLoading"
      style="height:285.5px;line-height:285.5px; "
    />
    <div v-else>
      <a-empty
        v-if="tableData.length===0"
        class="center"
      />
      <div v-else>
        <a-row class="table">
          <a-radio-group
            style="width: 100%;height: 100%;"
            @change="handleChange($event.target.value)"
          >
            <a-col
              class="right-border column"
              span="8"
            >
              <div
                v-for="i in _.chunk(tableData,5)[0]"
                :key="i.id"
                class="item"
              >
                <a-radio :value="i.id">{{ i.cookBookName }}</a-radio>
              </div>
            </a-col>
            <a-col
              class="right-border column"
              span="8"
            >
              <div
                v-for="i in _.chunk(tableData,5)[1]"
                :key="i.id"
                class="item"
              >
                <a-radio :value="i.id">{{ i.cookBookName }}</a-radio>
              </div>
            </a-col>
            <a-col
              class="column"
              span="8"
            >
              <div
                v-for="i in _.chunk(tableData,5)[2]"
                :key="i.id"
                class="item"
              >
                <a-radio :value="i.id">{{ i.cookBookName }}</a-radio>
              </div>
            </a-col>
          </a-radio-group>
        </a-row>
        <a-pagination
          v-model="form.pageNo"
          :defaultPageSize="15"
          :total="total"
          class="pagination"
          size="small"
          @change="getTableData()"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { cookBookStoreList } from "@/api/modular/cookBook/cookBookManage";


export default {
  props:['isChangeCookBook','recipeName'],
  name: "SelectCookBook",
  data() {
    return {
      foodTypeOptions: [],
      tableData: [],
      form: {
        pageNo: 1,
        pageSize: 15,
      },
      cookBookName: undefined,
      total: 0,
      curIndex01: undefined,
      curIndex02: undefined,
      showLoading: false
    };
  },
  created() {
    this.initData();
  },
  watch:{
    isChangeCookBook() {
      this.getTableData()
    },
    RecipeName(val){
      this.form.RecipeName = val
      this.getTableData()
    }
  },
  methods: {
    initData() {
      this.getTableData();
    },
    async getTableData(form = this.form) {
      this.showLoading = true;
      const { data: data } = await cookBookStoreList(form);
      this.showLoading = false;
      this.tableData = data.rows.map(i => {
        return {
          id: i.id,
          cookBookName: i.recipeName,
          abbreviation:i.abbreviation,
          recipesDetailsList:i.recipesDetailsList
        };
      });
      this.total = data.totalRows;
    },
    handleChangeTab(val) {
      if (val === "name") {
        this.getTableData();
      }
    },
    handleChange(id) {
      let res = this.tableData.find(item=>{
        return item.id == id
      })
      if(res.recipesDetailsList.length<1){
        return this.$message.warning("该食谱为空，无法选择！")
      }
      this.$emit("update:recipes", id, this.tableData.find(i => i.id === id).cookBookName,this.tableData.find(i => i.id === id).abbreviation);
    },
    handleSelectedType(id) {
      this.getTableData({ FoodMaterialsTypeId: id });
    }
  }
};
</script>

<style lang="less" scoped>
.selectBox {
  width: 500px;
  position: absolute;
  border: 1px solid #d9d9d9;
  text-align: center;
  z-index: 100000;
  background: white;

  .right-border {
    border-right: 1px solid #d9d9d9;
  }

  .item {
    height: 50px;
    line-height: 50px;
    text-align: center;
  }

  .pagination {
    margin-bottom: 5px;
    text-align: center;
  }
}
</style>